<template>
  <div class="wrap">
    <div id="container">
      <!-- 定义一个表格元素 -->
      <!--<button id="redraw">更换数据源</button>-->
      <section class="detail-header">
        <div class="col-sm-12 console-title">
          <h5 class="">告警模板</h5>
          <div class="stayRight ">
            <el-button @click="templetList(1)" icon="star-off">刷新</el-button>
            <el-button type="primary" @click="createAlarmTemplet()">创建告警模板</el-button>
          </div>
        </div>
      </section>
      <section class="tableMain">
        <el-table :data="dataArr" border style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="模板名称"></el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <!-- <el-table-column prop="appGroup" label="被应用过的组"> </el-table-column> -->
          <el-table-column prop="createTimeStr" label="修改时间"> </el-table-column>
          <el-table-column label="操作">
            <template scope="scope">
              <el-button size="small" type="text" @click="createAlarmTemplet(scope.$index, dataArr, 'true')">查看</el-button> |
              <el-button size="small" type="text" @click="createAlarmTemplet(scope.$index, dataArr)">修改</el-button> |
              <el-button size="small" type="text" @click="deleteTemplet(scope.$index, dataArr)">删除</el-button> |
              <el-button size="small" type="text" @click="templateToGroup(scope.$index, dataArr)">应用到标签</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pageSIzeblock">
          <div class="pullright">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesz" layout="total, sizes, prev, pager, next, jumper" :total="totalSize">
            </el-pagination>
          </div>
          <!-- 
          <div class="pullLeft">
            <el-button size="small" name="button-del" @click="templateToGroup()" :disabled="pdisabled">批量应用模板</el-button>
          </div>
           -->
        </div>
      </section>
      <el-dialog :title="templetTitle" :visible.sync="creatDialogVislble" class="customDialog team" :lock-scroll="false" size="full">
        <!-- <h4 class="dialogtitle">创建监控点</h4> -->
        <div class="scoreContainer tagCategory">
          <el-form :model="templetForm" ref="templetForm" label-width="120px" class="demo-templetForm">
            <div class="aar-gap">
              <div class="aar-gap-index">1</div>
              <div class="aar-gap-title ng-binding">基本信息</div>
              <div class="aar-gap-line-c">
                <div class="aar-gap-line"></div>
              </div>
            </div>
            <el-form-item label="模板名称" prop="name" :rules="[{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }]">
              <el-input v-model="templetForm.name" :disabled="isView"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
              <el-input type="textarea" v-model="templetForm.description" :disabled="isView"></el-input>
            </el-form-item>
            <div class="aar-gap">
              <div class="aar-gap-index">2</div>
              <div class="aar-gap-title ng-binding">告警策略</div>
              <div class="aar-gap-line-c">
                <div class="aar-gap-line"></div>
              </div>
            </div>
            <el-form-item label="产品类型" prop="instanceType" class="instanceTypeClass">
              <el-select v-model="templetForm.instanceType" :multiple="true" @change="instanceTypeChange" :disabled="isView" placeholder="请选择产品类型">
                <el-option v-for="item in instanceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <div v-for="(item,index) in templetForm.instanceTypeSelectArray" :key="index" class="typeGroup">
              <div style="border: 1px solid #f0f0f0;border-radius: 0px;width:85%;margin:0 auto;padding: 20px;margin-bottom:20px;position: relative;">
                <div class="typeGroupTitleClass">{{item.instanceTypeName}}</div>
                <div v-for="(rule,index2) in item.ruleList" :key="index2" style="line-height: 34px;" >
                  <span><span style="font-size:15px;">规则描述</span> :&nbsp;&nbsp;</span>
                  <!-- <el-form-item :rules="{ required: true, message: '请选择监控项', trigger: 'change' }" :prop="'instanceTypeSelectArray.' + index +'.ruleList.' + index2 + '.monitorItemId'" style="display:inline-block" class="tempClass" > -->
                  <el-select v-model="rule.monitorItemId" placeholder="请选择监控项" :disabled="isView" >
                    <el-option v-for="monitor_item in item.monitorItemList" :key="monitor_item.id" :label="monitor_item.name" :value="monitor_item.id"></el-option>
                  </el-select>
                  <!-- </el-form-item> -->
                  <el-select v-model="rule.timeRange" placeholder="请选择时间" :disabled="isView">
                    <el-option label="1分钟" value="1"></el-option>
                    <el-option label="2分钟" value="2"></el-option>
                    <el-option label="3分钟" value="3"></el-option>
                  </el-select>
                  <el-select v-model="rule.metric" placeholder="请选择指标" :disabled="isView">
                    <!-- <el-option label="平均值" value="avg"></el-option> -->
                    <el-option label="存在" value="exist"></el-option>
                    <el-option label="总是" value="always"></el-option>
                    <!-- <el-option label="总和" value="sum"></el-option> -->
                  </el-select>
                  <!-- 
                  <el-select v-model="rule.consecutiveTimes" placeholder="请选择指标" :disabled="isView">
                    <el-option label="连续1次" value="1"></el-option>
                    <el-option label="连续3次" value="3"></el-option>
                    <el-option label="连续5次" value="5"></el-option>
                  </el-select>
                   -->
                  <el-select v-model="rule.relation" placeholder="请选择关系" :disabled="isView">
                    <el-option label=">" value=">"></el-option>
                    <el-option label=">=" value=">="></el-option>
                    <el-option label="<" value="<"></el-option>
                    <el-option label="<=" value="<="></el-option>
                    <el-option label="=" value="="></el-option>
                  </el-select>
                  <el-form-item :rules="{ required: true, message: '域值不能为空', trigger: 'blur' }" :prop="'instanceTypeSelectArray.' + index +'.ruleList.' + index2 + '.values'" style="display:inline-block" class="tempClass" >
                  <el-input class="valuesClass" v-model="rule.values" placeholder="请输入值域" :disabled="isView" ></el-input>
                  </el-form-item>
                  <span v-if="monitor_item.id===rule.monitorItemId" v-for="monitor_item in item.monitorItemList">{{monitor_item.unit}}</span>
                  <a class="btn delete-link" @click="deleteRuleData(index,index2)" v-if="index2!=0 && !isView"><span>删除</span></a>
                </div>
                <div style="height: 40px;line-height: 34px;">
                  <a class="btn btn-link" @click="addRuleData(item,index)" v-if="!isView"><span class="el-icon-plus"></span><span class="ng-binding">添加告警规则</span></a>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="creatDialogVislble = false">取 消</el-button>
                    <el-button type="primary" @click="creatSubmit('templetForm')" :disabled="isView">确 定</el-button>
                </span>
      </el-dialog>
      <el-dialog title="应用模板到标签" :visible.sync="templetToGroupDialogVislble" class="customDialog team" :lock-scroll="false">
        <div class="scoreContainer tagCategory">
          <el-form :model="templetToGroupForm" :rules="rulesTag" ref="templetToGroupForm" label-width="120px" class="demo-templetToGroupForm">
            <el-form-item label="我的标签" prop="tagId">
              <el-select v-model="templetToGroupForm.tagId" filterable placeholder="请选择标签" @change="changeTest">
                <el-option v-for="item in myTagList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="沉默通道时间">
                <el-select v-model="templetToGroupForm.channelSilenceTime">
                  <el-option label="10分钟" value="10"></el-option>
                  <el-option label="1小时" value="60"></el-option>
                  <el-option label="12小时" value="720"></el-option>
                  <el-option label="24小时" value="1440"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生效时间">
                <el-time-select
                  placeholder="起始时间"
                  v-model="templetToGroupForm.startTime"
                  :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00'
                  }">
                </el-time-select>
                <el-time-select
                  placeholder="结束时间"
                  v-model="templetToGroupForm.endTime"
                  :picker-options="{
                    start: '00:59',
                    step: '01:00',
                    end: '23:59',
                    minTime: templetToGroupForm.startTime
                  }">
                </el-time-select>
            </el-form-item>
            <el-form-item label="通知对象" prop="transfer">
                <el-transfer 
                  filterable
                 :footer-format="{
                    noChecked: '共${total}项',
                    hasChecked: '已选${checked}/${total} 项'
                  }"
                 :titles="['联系人通知组', '已选联系组']"  
                 v-model="templetToGroupForm.contactsGroupIds" 
                 :data="contactsGroupList"> 
                </el-transfer>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="templetToGroupDialogVislble = false">取 消</el-button>
          <el-button type="primary" @click="SaveTempletToGroupForm('templetToGroupForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getList, queryListByAlarmTempletId, saveAlarmTemplet, deleteAlarmTempletById, getAlarmContactsGroupList, alarmTempletToGroup } from '@/api/alarmRulesData'
import { getAllInstanceTypeList } from '@/api/instanceTypeData'
import { queryMyTags } from '@/api/instanceData'
//  import { queryAllApps } from '@/api/appGroupData'
export default {
  data() {
    const generateAlarmContactsGroupList = _ => {
      const data = []
      /*  获取联系人组数据 */
      getAlarmContactsGroupList().then(response => {
        if (response.data.code === 0) {
          response.data.data.forEach(function(element) {
            data.push({
              key: element.id,
              label: element.name
            })
          }, this)
        }
      })
      return data
    }
    return {
      dataArr: null,
      templetTitle: '',
      dataAddress: [],
      listLoading: true,
      isNotPermission: '',
      advancedSettings: false,
      pdisabled: true,
      creatDialogVislble: false,
      templetToGroupDialogVislble: false,
      currentSetting: '',
      currentPage: 1,
      pagesz: 10,
      totalSize: 0,
      hightsetting: false,
      hasError: false,
      monitorItem: '',
      multipleSelection: [{ test: [] }],
      isView: false,
      instanceTypeList: [],
      myTagList: [],
      contactsGroupList: generateAlarmContactsGroupList(),
      alarmTempletInstanceTypeRel: [{
        ruleList: [{
          monitorItemId: '请选择',
          timeRange: '请选择',
          metric: '请选择',
          consecutiveTimes: '请选择',
          relation: '请选择',
          values: ''
        }],
        id: 0,
        instanceTypeId: 1,
        monitorItemList: []
      }, {
        ruleList: [{
          monitorItemId: '请选择',
          timeRange: '请选择',
          metric: '请选择',
          consecutiveTimes: '请选择',
          relation: '请选择',
          values: ''
        }],
        id: 0,
        instanceTypeId: 2,
        monitorItemList: []
      }],
      templetForm: {
        id: 0, // 模板ID
        name: '', // 模板名称
        description: '', // 模板描述
        instanceTypeSelectArray: [], // 模板规则数据
        instanceType: [] // 产品类别选中数据
      },
      templetToGroupForm: {
        templateId: 0,
        templateName: '',
        channelSilenceTime: '1440',
        startTime: '00:00',
        endTime: '23:59',
        contactsGroupIds: [],
        myAppGroupId: 0,
        tagId: '',
        myAppGroupName: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        frequency: [
          { required: true, message: '请选择监控频率', trigger: 'change' }
        ],
        rqType: [
          { required: true, message: '请选择请求方法', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请选择监控地址', trigger: 'change' }
        ]
      },
      rulesTag: {
        tagId: [
          { required: true, message: '请选择标签', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.templetList(1)
  },
  methods: {
    templetList(curr, size) {
      this.listLoading = true
      if (size === undefined) {
        size = 10
      }
      var listQuery = { currPage: curr, pageSize: size }
      getList(listQuery).then(response => {
        console.log(response.data)
        this.dataArr = response.data.data
        this.listLoading = false
        this.totalSize = response.data.totalRows
        this.currentPage = curr
        this.pagesz = size
      })
    },
    templateToGroup(index, data) {
      this.templetToGroupForm.templateId = data[index].id
      this.templetToGroupForm.templateName = data[index].name
      queryMyTags().then(response => {
        this.myTagList = []
        this.templetToGroupForm.tagId = ''
        if (response.data.code === 0) {
          this.myTagList = response.data.rows
          const arr = []
          for (var i in response.data.rows) {
            arr.push({ id: '' + response.data.rows[i].id, name: response.data.rows[i].name })
          }
          this.myTagList = arr
        }
      })
      /*  queryAllApps().then(response => {
        this.templetToGroupForm.myAppGroupId = response.data.rows[0].id
        this.templetToGroupForm.myAppGroupName = response.data.rows[0].name
      })  */
      this.templetToGroupDialogVislble = true
    },
    changeTest(val) {
      console.log(val, 'val')
    },
    SaveTempletToGroupForm(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认保存应用到分组？', '提示', {
            type: 'warning'
          })
          .then(_ => {
            var formParams = { formParams: JSON.stringify(this.templetToGroupForm) }
            alarmTempletToGroup(formParams).then(response => {
              if (response.data.code === 0) {
                _this.templetToGroupDialogVislble = false
                _this.templetList(1)
                _this.$message({
                  message: '操作成功!',
                  type: 'success'
                })
              }
            })
          })
          .catch(_ => {})
        }
      })
    },
    createAlarmTemplet(index, data, isView) {
      if (isView !== undefined) {
        this.isView = true
      } else {
        this.isView = false
      }
      const _this = this
      this.creatDialogVislble = true
      this.alarmTempletInstanceTypeRel = []
      // 填充产品类型数据
      getAllInstanceTypeList().then(response => {
        this.instanceTypeList = []
        const instanceTypeListData = response.data
        if (instanceTypeListData.code === 0) {
          if (data !== undefined) {
            // 初始化
            queryListByAlarmTempletId(data[index].id).then(response => {
              // 记录该告警模板保存的产品类别
              const instanceTypeTemp = []
              const instanceTypeObjTemp = []
              if (response.data.code === 0) {
                response.data.data.forEach(function(element) {
                  instanceTypeTemp.push(element.instanceTypeId)
                  instanceTypeObjTemp.push(element)
                }, this)
                // 循环所有产品类别，初始化规则数据
                instanceTypeListData.data.forEach(function(element) {
                  this.instanceTypeList.push(element)
                  let findInstanceTypeObjTemp = {}
                  findInstanceTypeObjTemp = instanceTypeObjTemp.find((item) => {
                    return item.instanceTypeId === element.id
                  })
                  if (findInstanceTypeObjTemp === undefined) {
                    // 初始化第一条规则数据
                    const obj = {}
                    obj.id = 0
                    obj.instanceTypeId = element.id
                    obj.monitorItemList = element.monitorItemList
                    let monitorItemIdTemp = '请选择'
                    if (obj.monitorItemList.length > 0) {
                      monitorItemIdTemp = obj.monitorItemList[0].id
                    }
                    obj.ruleList = [{ id: 0, monitorItemId: monitorItemIdTemp, timeRange: '1', metric: 'exist', consecutiveTimes: '请选择', relation: '>', values: '' }]
                    this.alarmTempletInstanceTypeRel.push(obj)
                  } else {
                    // 初始化第一条规则数据
                    const obj = {}
                    obj.id = findInstanceTypeObjTemp.id
                    obj.instanceTypeId = findInstanceTypeObjTemp.instanceTypeId
                    obj.monitorItemList = element.monitorItemList
                    obj.ruleList = findInstanceTypeObjTemp.ruleList
                    this.alarmTempletInstanceTypeRel.push(obj)
                  }
                }, this)
                this.templetTitle = '修改告警模板'
                this.templetForm = {
                  //  instanceType: data[index].type,
                  id: data[index].id,
                  name: data[index].name,
                  description: data[index].description,
                  instanceTypeSelectArray: [],
                  instanceType: instanceTypeTemp
                }
                this.templetForm.instanceType.forEach(function(element) {
                  let instanceType = {}
                  _this.instanceTypeList.forEach(function(element2) {
                    if (element2.id === element) {
                      instanceType = element2
                    }
                  }, this)
                  _this.alarmTempletInstanceTypeRel.forEach(function(element2) {
                    if (element2.instanceTypeId === element) {
                      element2.monitorItemList = instanceType.monitorItemList
                      element2.instanceTypeName = instanceType.name
                      this.templetForm.instanceTypeSelectArray.push(element2)
                    }
                  }, this)
                }, this)
              }
            })
          } else {
            this.templetTitle = '创建告警模板'
            //  清空数据
            this.alarmTempletInstanceTypeRel = []
            this.templetForm = {
              id: 0,  //  模板ID
              name: '', //  模板名称
              description: '',  //  模板描述
              instanceTypeSelectArray: [],  //  模板规则数据
              instanceType: []  //  产品类别选中数据
            }
            // 循环所有产品类别，初始化规则数据
            instanceTypeListData.data.forEach(function(element) {
              this.instanceTypeList.push(element)
              // 初始化第一条规则数据
              const obj = {}
              obj.id = 0
              obj.instanceTypeId = element.id
              obj.monitorItemList = element.monitorItemList
              let monitorItemIdTemp = '请选择'
              if (obj.monitorItemList.length > 0) {
                monitorItemIdTemp = obj.monitorItemList[0].id
              }
              obj.ruleList = [{ id: 0, monitorItemId: monitorItemIdTemp, timeRange: '1', metric: 'exist', consecutiveTimes: '请选择', relation: '>', values: '' }]
              this.alarmTempletInstanceTypeRel.push(obj)
            }, this)
          }
        }
      })
    },
    creatSubmit(formName) {
      const _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('确认保存告警模板？', '提示', {
            type: 'warning'
          })
          .then(_ => {
            saveAlarmTemplet(this.templetForm).then(response => {
              if (response.data.code === 0) {
                _this.creatDialogVislble = false
                _this.templetList(1)
                _this.$message({
                  message: '操作成功!',
                  type: 'success'
                })
              } else {
                _this.$message({
                  message: response.data.msg,
                  type: 'warning'
                })
              }
            })
          })
          .catch(_ => {})
          console.log(this.templetForm, 'templetForm')
        }
      })
    },
    sethigh() {
      this.hightsetting = true
    },
    handleSizeChange(val) {
      this.templetList(1, '', '', val)
    },
    handleCurrentChange(val) {
      this.templetList(val)
    },
    deleteTemplet(index, data) {
      this.$confirm('确认删除告警模板？', '提示', {
        type: 'warning'
      })
      .then(_ => {
        const templateId = data[index].id
        deleteAlarmTempletById(templateId).then(response => {
          if (response.data.code === 0) {
            this.templetList(1)
            this.$message({
              message: '删除成功!',
              type: 'success'
            })
          }
        })
      })
      .catch(_ => {})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val /**/
      if (this.multipleSelection.length > 0) {
        this.pdisabled = false
      } else {
        this.pdisabled = true
      }
      console.log(this.multipleSelection, 'multipleSelection')
    },
    instanceTypeChange(val) {
      const _this = this
      this.templetForm.instanceTypeSelectArray = []
      this.templetForm.instanceType = val
      if (this.templetForm.instanceType.length > 0) {
        val.forEach(function(element) {
          let instanceType = {}
          _this.instanceTypeList.forEach(function(element2) {
            if (element2.id === element) {
              instanceType = element2
            }
          }, this)
          _this.alarmTempletInstanceTypeRel.forEach(function(element2) {
            if (element2.instanceTypeId === element) {
              element2.monitorItemList = instanceType.monitorItemList
              element2.instanceTypeName = instanceType.name
              this.templetForm.instanceTypeSelectArray.push(element2)
            }
            console.log(element, this.templetForm.instanceTypeSelectArray, '11111')
          }, this)
        }, this)
      }
      console.log(this.templetForm.instanceTypeSelectArray, 'this.templetForm.instanceTypeSelectArray')
    },
    changeItem(val) {
      console.log('test')
    },
    addRuleData(item, index) {
      let obj = {}
      obj = JSON.parse(JSON.stringify(item.ruleList[0]))
      obj.id = 0
      obj.timeRange = '1'
      obj.metric = 'exist'
      obj.consecutiveTimes = '请选择'
      obj.relation = '>'
      obj.values = ''
      this.templetForm.instanceTypeSelectArray[index].monitorItemList.forEach(function(element) {
        let obj1 = {}
        obj1 = this.templetForm.instanceTypeSelectArray[index].ruleList.find((item) => {
          return item.monitorItemId === element.id
        })
        if (obj1 === undefined) {
          obj.monitorItemId = element.id
        }
      }, this)
      this.templetForm.instanceTypeSelectArray[index].ruleList.push(obj)
    },
    deleteRuleData(index, index1) {
      console.log(index, index1)
      this.templetForm.instanceTypeSelectArray[index].ruleList.splice(index1, 1)
    }
  }
}

</script>
<style lang="scss">
.detail-header {
  padding: 0 15px;
  margin-bottom: 10px;
  overflow: hidden;
  .console-title {
    padding: 16px 0px;
    min-height: 70px;
    border-bottom: 1px solid #eee;
    position: relative;
    h5 {
      display: inline-block;
      text-indent: 8px;
      border-left: 2px solid #88B7E0;
      margin: 8px 0;
      margin-right: 8px;
      vertical-align: top;
    }
    .stayRight {
      position: absolute;
      top: 15px;
      right: 0;
      overflow: hidden;
      .refresh {
        float: left;
        margin-right: 10px;
        color: #333;
        border: 1px solid #ddd;
        background-color: #F7F7F7;
      }
      .creatSite {
        float: left;
      }
    }
  }
}

.searchSel {
  width: 150px;
  display: inline-block;
}

.searchIpt {
  width: 350px;
  display: inline-block;
}

.searchbtn {
  width: 100px;
  display: inline-block;
}

.searchBar {
  padding: 0 10px;
}

.tableMain {
  padding: 10px;
}

.typeform {
  display: inline;
  .form-control {
    border: none;
    padding: 0;
    box-shadow: none;
    display: inline;
    height: 30px;
    width: 60%;
  }
}

.spantype {
  display: inline;
}

.pageSIzeblock {
  overflow: hidden;
  padding: 10px 0;
  .pullright {
    float: right;
  }
}

.statusError {
  color: red;
}

.aar-gap-line {
  height: 0;
  border-bottom: 1px dotted #888888;
  display: inline-block;
  width: 100%;
}

.aar-gap-index {
  background: #0099cc;
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  color: #fff;
  border-radius: 20px;
  text-align: center;
  line-height: 40px;
}

.aar-gap {
  position: relative;
  height: 50px;
}

.aar-gap-title {
  margin-left: 15px;
  font-weight: bold;
  font-size: 13px;
  position: absolute;
  left: 40px;
  top: 12px;
  background: #fff;
  padding-right: 8px;
}

.aar-gap-line-c {
  height: 40px;
  margin: 0 50px 0 120px;
  line-height: 38px
}

.instanceTypeClass .el-select {
  width: 800px;
}

.typeGroupTitleClass {
  position: absolute;
  margin-left: 0px;
  top: -13px;
  left: 25px;
  font-size: 15px;
  background: #fff;
  z-index: 998;
  padding: 4px 10px 4px 0px
}
.tempClass{
  .el-form-item__content{
    margin-left: 0!important;

  }
}

.valuesClass {
  width: 100px;
}

.btn-link {
  color: #06C;
  text-shadow: none;
  border: none;
  margin-left: 80px;
}

.btn-link:hover {
  color: #039
}

.delete-link {
  color: red;
  text-shadow: none;
  border: none;
  margin-left: 10px;
}

.delete-link:hover {
  color: red;
}





















/*.el-form{width: 80%;margin: 0 auto;}*/

</style>
